<template>
    <div>
<!--        <pre>{{songList}}</pre>-->
        <div>专辑： {{albumTitle}}</div>
        <aplayer v-if="firstSong" autoplay :music="firstSong"
              :list="songList"
        />
    </div>
</template>

<script>
    import axios from "axios";
    import Aplayer from 'vue-aplayer'


    export default {
        name: "audioDetail",
        components: {Aplayer},
        data() {
            return {
                songList: [],
                firstSong: null,
                albumTitle: null,
            }
        },
        methods: {
          async loadAudio(albumId) {
              let response = await axios.get( 'http://ddup4.com/albumData/album_' + albumId + '.json')
              // console.log('response:', response)
              this.songList = response.data.result.content.map(r => {
                  return {
                      title: r.songName,
                      artist: '课本配套',
                      src: r.playerJson.src.includes("video.tarsadata.com") ? r.playerJson.src.replace("video.tarsadata.com", "ddup4.com") : r.playerJson.src,
                      pic: r.playerJson.pic,
                  }
              })
              this.firstSong = this.songList && this.songList.length > 0 ? this.songList[0] : null
          }
        },
        mounted() {
            if (this.$route.query) {
                let albumId = this.$route.query['albumId']
                this.albumTitle = this.$route.query['albumTitle']
                this.loadAudio(albumId)
            }
        }
    }
</script>

<style scoped>

</style>
